<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>动画-案例《手风琴》</title>
      
  </head>

  <body>
    <div id="box">
      <input type="text" placeholder="请输入搜索内容" v-model="value" @input="onInput">
      <br>
    </div>

    <script src="./vue.js"></script>
    <script>
      let app = new Vue({
        el: '#box',
        data: {
          value:'',
          timeID:null
        },
        methods: {
            onInput(){
                //1.每一次触发事件，先清除上一次定时器。以本次为准
                clearTimeout(this.timeID)
                //2.开启定时器间隔0.5s执行（防抖间隔）
                this.timeID = setTimeout(()=>{
                    console.log(this.value);
                    
                },500)
               
            }
        },
      })
    </script>
  </body>
</html>
